import React from 'react'
import { withRouter } from 'react-router-dom'

import './style.css'

class Commodity extends React.Component {
    toInfo = () => {
        const { history, data } = this.props
        history.push(`/commodityInfo/${data._id}`)
    }
    render() {
        const { data } = this.props
        
        return (
            <div 
                className='commodity'
                onClick={this.toInfo}
            >
                <dl >
                    <dt 
                        className='commodity-photo'
                        style={{ backgroundImage: `url(${data.banners[0]})` }}
                    >
                    </dt>   
                    <dd className='commodity-name' >{data.title}</dd>
                    <dd className='commodity-price'>¥ {data.price}</dd>
                </dl>
            </div>
        )
    }
}


export default withRouter(Commodity)
